<template>
  <div class="swiper-item" :class="direction">
    <slot></slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
      direction: '',
      timer: ''
    }
  },

  methods: {
    /**
     * 展示当前的banner图片
     * @param { String }  direction  展示的方向（in：进入；out：离开）
     * @param { Boolean } isLeftMove 是否向左移动（true：向左；false：向右）
     */
    showOrHideSwiper (direction, isLeftMove) {
      // 移动方向
      this.direction = `${direction}${isLeftMove ? '' : '-reverse'}`
    }
  }
}
</script>

<style lang="less" scoped>
@import "./../../styles/common";

.swiper-item {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 100%;
  &.in {
    animation: swiper-in 500ms ease;
    animation-fill-mode: forwards;
  }
  &.in-reverse {
    animation: swiper-in-reverse 500ms ease;
    animation-fill-mode: forwards;
  }
  &.out {
    animation: swiper-out 500ms ease;
    animation-fill-mode: forwards;
  }
  &.out-reverse {
    animation: swiper-out-reverse 500ms ease;
    animation-fill-mode: forwards;
  }
}
@keyframes swiper-in {
  0% {
    left: 100%;
  }
  100% {
    left: 0px;
  }
}
@keyframes swiper-out {
  0% {
    left: 0px;
  }
  100% {
    left: -100%;
  }
}
@keyframes swiper-in-reverse {
  0% {
    left: -100%;
  }
  100% {
    left: 0px;
  }
}
@keyframes swiper-out-reverse {
  0% {
    left: 0px;
  }
  100% {
    left: 100%;
  }
}
</style>
